<template>
    <figure class="competitionDesc-blcok">
        <img :src="item.image_url" width="200px" height="150px">
        <div class="content-block">
            <div>
                <span class="status" :style="style">{{ item.checkstatus }}</span>
                <span>{{ item.competition_name }}</span>
            </div>
            <div>主办单位:{{ item.owner_user_name }}</div>
        </div>
        <div class="time-block">
            <p>{{ create_time }}</p>
        </div>
    </figure>
</template>

<script>
import { formatData } from '@/utils/format';
export default {
     props:['item'],
     computed: {
         style(){
             if(this.item.checkstatus === '已结束'){
                 return{
                     background:"rgba(185,191,197,1)"
                 }
             }else{
                 return{
                     background:"rgba(104,170,253,1)"
                 }
             }
         },
         create_time(){
            return formatData(this.item.create_time,{type:'detail'})
        },
     },
     data() {
         return {
             message:""
         }
     },
}
</script>

<style lang="scss" scoped>
    .competitionDesc-blcok{
        display: flex;
        padding: 25px;
    }
    .content-block{
        margin-left: 22px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & > div:first-of-type{
            font-size:16px;
            font-weight:600;
            color:rgba(51,51,51,1);
        }
        & > div:nth-child(2){
            font-size:12px;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .status{
            font-size:10px;
            display:inline-block;
            width:40px;
            height: 19px;
            line-height: 19px;
            border-radius:6px;
            text-align:center;
            color:rgba(255,255,255,1);
        }
    }
    .time-block{
        width: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:12px;
        font-weight:400;
        color:rgba(153,153,153,1);
    }
</style>
